<!--
 * @description: 自定义抽屉视图
 * @fileName: index
 * @author: 17076
 * @date: 2024/6/13-上午9:10
 * @version: V1.0.0
-->

<template>
  <el-drawer
    :visible.sync="drawerOption['show']"
    :append-to-body="drawerOption['appendToBody'] || true"
    :show-close="drawerOption['showClose'] || true"
    :modal="drawerOption['modal']"
    :direction="drawerOption['direction'] || 'rtl'"
    :wrapper-closable="drawerOption['wrapperClosable'] || false"
    :size="drawerOption['width'] || '35%'"
    destroy-on-close
  >
    <template slot="title">
      <span class="title">{{ drawerOption['title'] }}</span>
    </template>
    <el-scrollbar
      :style="{height: drawerOption['height'] || height + 'px'}"
      class="scroll-container"
      :native="false"
      :noresize="true"
    >
      <div class="drawer-content">
        <slot name="content" />
      </div>
    </el-scrollbar>
    <div
      v-if="!drawerOption['hiddenFooter']"
      class="drawer-footer"
    >
      <slot name="footer">
        <el-button type="primary" plain @click="reset" style="width: 150px">重 置</el-button>
        <el-button type="primary" @click="submit" style="width: 150px">确 定</el-button>
      </slot>
    </div>
    <div
      v-else
      class="drawer-footer"
    >
      <slot name="footer" />
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'Index',
  props: {
    drawerOption: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      height: null
    }
  },
  mounted() {
    this.height = document.body.offsetHeight -
      (this.drawerOption['hiddenFooter'] ? 80 : 130)
    window.addEventListener('resize', (e) => {
      this.height = document.body.offsetHeight -
        (this.drawerOption['hiddenFooter'] ? 80 : 130)
    })
  },
  methods: {
    // 重置按钮
    reset() {
      this.$emit('onReset')
    },
    // 确定按钮
    submit() {
      this.$emit('onSubmit', status => {
        if (status) this.drawerOption.show = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
 .title {
   font-weight: bold;
   font-size: 18px;
   color: #333333;
   padding-left: 10px;
   border-left: 5px solid #005AA8;
 }
 .drawer-content {
   padding: 20px;
   box-sizing: border-box;
 }
 .drawer-footer {
   text-align: right;
   padding: 0 20px;
   margin-top: 10px;
 }
 ::v-deep {
   .el-drawer__header {
     border-bottom: 1px solid #E9E9E9;
     margin-bottom: 0;
     padding-bottom: 20px;
   }
 }
</style>
